<template>
	<view>
		<u-navbar title-bold :is-fixed="false" :titleSize="34" :border-bottom="false" title="详情" :background="{
			background:'url(https://resource.lanbaozixun.com/uploads/images/202408072106365a0d04602.png) no-repeat',
			backgroundSize:'100%'
		}" title-color="#2F3033">
		</u-navbar>
		<view class="news-details mt30">
			<view class="header">
				<view class="title xxl mb20 font-weight-500 u-padding-left-10">{{ articleDetail.title }}</view>
				<view class="row-between xs u-color-666666">
					<view>发布时间：{{ articleDetail.create_time }}</view>
					<view>{{ articleDetail.visit }}人浏览</view>
				</view>
			</view>
			<view class="main" v-if="articleDetail.paid_status == 1">
				<u-parse :html="article_content" :tag-style="tagStyle" :selectable="true" :show-with-animation="true"
					:lazy-load="true" />
			</view>
			<view class="u-text-center" v-else-if="articleDetail.paid_status == 0">
				<view class="md unlock-btn" @click="purchase">
					<u-icon name="lock"></u-icon>{{articleDetail.price||0}}元解锁文章
				</view>
			</view>
		</view>
		<loading-view v-if="showLoading"></loading-view>
		<comment-area :id="articleDetail.id" :type="1"></comment-area>
		<!--<import src="/wxParse/wxParse.wxml"></import>-->
	</view>
</template>

<script>
	import Cache from "@/utils/cache"
	import wechath5 from '@/utils/wechath5'
	import {
		prepay
	} from '@/api/app'
	import {
		wxpay,
		alipay
	} from '@/utils/pay'
	import {
		getArticleDetail
	} from '@/api/new';
	import {
		orderBuy,
	} from '@/api/order'
	export default {
		data() {
			return {
				showLoading: true,
				articleDetail: {},
				article_content: "",
				tagStyle: {
					img: 'width:100%;'
				}
			};
		},

		components: {},
		props: {},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			this.type = options.type || '';
			this.id = options.id;

			if (this.type) {
				uni.setNavigationBarTitle({
					title: '帮助详情'
				});
			} else {
				uni.setNavigationBarTitle({
					title: '资讯详情'
				});
			}

			this.getArticleDetailFun();
		},


		methods: {
			getArticleDetailFun() {
				getArticleDetail({
					type: this.type,
					id: this.id
				}).then(res => {
					if (res.code == 1) {
						this.articleDetail = res.data
						// #ifdef H5
						wechath5.share({
							shareTitle: res.data.title,
							shareLink: "pages/news_details/news_details?id=" + this.id + '&type=' + this
								.type,
							shareImage: res.data.image,
							shareDesc: '蓝豹咨讯'
						})
						Cache.set("shareInfo", {
							h5_share_image: res.data.image,
							h5_share_title: res.data.title,
							h5_share_intro: '蓝豹咨讯'
						})
						// #endif
						//wxParse.wxParse('content', 'html', res.data.content, this, 15)
						setTimeout(() => {
							this.article_content = res.data.content;
						}, 200);
						setTimeout(() => {
							this.showLoading = false
						}, 300);
					}
				});
			},
			purchase() {
				uni.showLoading({
					title: '加载中'
				});
				orderBuy({
					action: 'submit',
					item_id: this.articleDetail.buy_item_id
				}).then(res => {
					if (res.code == 1) {
						uni.hideLoading();
						if(res.data.pay_type == 2){
							this.getArticleDetailFun()
						}else{
							prepay({
								from: res.data.type,
								order_id: res.data.order_id,
								pay_way: 1,
							}).then(res => {
								this.handleWechatPay(res.data);
							}).catch(err => {}).finally(() => {
								setTimeout(() => {
									this.loadingPay = false
								}, 500)
							})
						}

						
					} else {
						throw new Error(res.msg)
					}
				})
			},
			// 微信支付
			handleWechatPay(data) {
				wxpay(data).then(res => {
					this.handPayResult(res)
				})
			},
			// 支付后处理
			handPayResult(result) {
				switch (result) {
					case 'success':
						window.location.href = ''
						break;
					case 'fail':
					default:

				}
				// 页面出栈
			}

		},
		onShareTimeline() {
			const {
				articleDetail
			} = this;
			return {
				title: articleDetail.title,
				imageUrl: articleDetail.image,
				path: "pages/news_details/news_details?id=" + this.id + '&type=' + this.type,
			};
		},
		async onShareAppMessage() {
			const {
				articleDetail
			} = this;
			return {
				title: articleDetail.title,
				imageUrl: articleDetail.image,
				path: "pages/news_details/news_details?id=" + this.id + '&type=' + this.type,
			};
		},
	};
</script>
<style lang="scss">
	page {
		background: url('https://resource.lanbaozixun.com/uploads/images/202408072106365a0d04602.png') no-repeat;
		background-size: 100% auto;
		background-color: #F7F7F7;
	}

	.news-details {
		position: relative;
		padding-bottom: 40rpx;
		border-radius: 20rpx 50rpx 0 0;
		border: 2px solid rgba(255, 255, 255, 1);
		border-bottom: 0 solid transparent;
		background: linear-gradient(162.85deg, rgba(212, 234, 255, 1) 0%, rgba(255, 255, 255, 1) 47%, rgba(255, 255, 255, 0) 100%);
	}

	.news-details::before {
		content: ' ';
		top: 20rpx;
		right: 20rpx;
		width: 200rpx;
		height: 150rpx;
		position: absolute;
		background: url('https://resource.lanbaozixun.com/uploads/images/202408072112563ba405219.png') no-repeat;
		background-size: 100% 100%;
	}

	.news-details .header {
		position: relative;
		padding: 40rpx 30rpx;
	}

	.news-details .header::before {
		content: '';
		left: 0;
		width: 16rpx;
		height: 48rpx;
		position: absolute;
		background: #0484FF;
		border-radius: 0 50rpx 50rpx 0;
	}

	.news-details .main {
		padding: 30rpx;
		border-radius: 15rpx;
		margin: 0 30rpx;
		background: linear-gradient(150.54deg, #FFFFFF 0%, #F6FBFF 10.54%, #FFFFFF 79.05%, #EDF6FF 100%);
		border: 2px solid #CAE5FF;
	}

	.title {
		color: #0484FF;
	}

	.wxParse-p image {
		width: 100%;
	}

	.unlock-btn {
		padding: 16rpx 32rpx;
		margin: 40vh auto;
		display: inline-block;
		border-radius: 100rpx;
		color: $-color-primary;
		border: 2rpx solid $-color-primary;
	}
</style>